<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>健康趋势</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
        .status-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            background-color: #f5f5f5;
            border-bottom: 1px solid #ddd;
        }
        .status-item {
            display: flex;
            align-items: center;
        }
        .time {
            font-weight: bold;
        }
        .doctor-info {
            margin-left: 20px;
        }
        .notification {
            position: relative;
            margin-right: 20px;
        }
        .notification-badge {
            position: absolute;
            top: -5px;
            right: -5px;
            background-color: red;
            color: white;
            border-radius: 50%;
            width: 16px;
            height: 16px;
            font-size: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .search-box {
            padding: 5px 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .trend-container {
            display: flex;
            margin-left: 280px;
            margin-top: 20px;
            margin-right: 20px;
            height: calc(100vh - 100px);
        }
        .patient-sidebar {
            position: fixed;
            top: 0;
            left: 0;
            width: 200px;
            height: 100vh;
            background: white;
            border-radius: 0;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 15px;
            margin-right: 20px;
            z-index: 1000;
        }
        .trend-content {
            flex: 1;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 20px;
        }
        .button-grid {
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            gap: 10px;
            margin-top: 20px;
            overflow-x: auto;
        }
        .trend-btn {
            padding: 10px;
            background: #2196F3;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            text-align: center;
            white-space: nowrap;
        }
        
        .trend-form {
            margin-top: 20px;
            padding: 20px;
            background: #f9f9f9;
            border-radius: 8px;
        }
        
        .trend-chart {
            margin-top: 20px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div class="status-bar">
        <div class="status-item">
            <div style="margin-left: 20px;">
                <span>主治医生: </span>
                <span id="attending-doctor">李医生</span>
            </div>
            <div class="add-patient" id="add-patient-btn" style="margin-right: 20px; color: #2196F3; cursor: pointer;">增加患者</div>
            <div class="add-patient" id="add-patient-btn" style="margin-right: 20px; color: #2196F3; cursor: pointer;">加入患者</div>
            <input type="text" class="search-box" placeholder="患者姓名/床号" style="margin-right: 10px;">
            <input type="text" class="search-box" placeholder="搜索床号">
        </div>
        <div class="status-item">
            <div class="time" id="current-time"></div>
            <div class="doctor-info">
                <span id="doctor-name">张医生</span>
                <span id="doctor-department"> - 内科</span>
                <span id="doctor-title"> - 主任医师</span>
            </div>
            <div class="notification">
                <span>🔔</span>
                <span class="notification-badge">3</span>
            </div>
        </div>
    </div>

    <div class="trend-container">
        <div class="patient-sidebar">
            <h3 style="margin-top: 0; padding-bottom: 10px; border-bottom: 1px solid #eee;">患者列表</h3>
            <div id="patient-list" style="margin-top: 15px; max-height: calc(100vh - 250px); overflow-y: auto;">
                <div class="patient-item" style="padding: 10px; margin: 5px 0; border-radius: 4px; background: #fff; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.1);" onclick="selectPatient('张三', '3号床')">
                    <div style="font-weight: bold;">张三</div>
                    <div style="font-size: 12px; color: #666;">3号床 · 心血管疾病</div>
                </div>
                <div class="patient-item" style="padding: 10px; margin: 5px 0; border-radius: 4px; background: #fff; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.1);" onclick="selectPatient('李四', '5号床')">
                    <div style="font-weight: bold;">李四</div>
                    <div style="font-size: 12px; color: #666;">5号床 · 呼吸系统疾病</div>
                </div>
                <div class="patient-item" style="padding: 10px; margin: 5px 0; border-radius: 4px; background: #fff; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.1);" onclick="selectPatient('王五', '8号床')">
                    <div style="font-weight: bold;">王五</div>
                    <div style="font-size: 12px; color: #666;">8号床 · 常规检查</div>
                </div>
            </div>
            
            <div style="margin-top: 15px; padding: 10px; background: #f5f5f5; border-radius: 4px;">
                <div>当前患者: <span id="patient-name" style="font-weight: bold;">未选择</span></div>
                <div>床号: <span id="patient-bed">-</span></div>
            </div>
        </div>

        <div class="trend-content">
            <h2 style="margin-top: 0;">健康趋势分析</h2>
            <div class="button-grid">
                <button class="trend-btn" onclick="showTrend('cardiovascular')">心血管系统</button>
                <button class="trend-btn" onclick="showTrend('respiratory')">呼吸系统</button>
                <button class="trend-btn" onclick="showTrend('digestive')">消化系统</button>
                <button class="trend-btn" onclick="showTrend('nervous')">神经系统</button>
                <button class="trend-btn" onclick="showTrend('endocrine')">内分泌系统</button>
                <button class="trend-btn" onclick="showTrend('urinary')">泌尿系统</button>
                <button class="trend-btn" onclick="showTrend('immune')">免疫系统</button>
                <button class="trend-btn" onclick="showTrend('musculoskeletal')">运动系统</button>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        function selectPatient(name, bed) {
            document.getElementById('patient-name').textContent = name;
            document.getElementById('patient-bed').textContent = bed;
        }

        function showTrend(type) {
            // 清除之前的内容
            const contentDiv = document.querySelector('.trend-content');
            while (contentDiv.children.length > 2) {
                contentDiv.removeChild(contentDiv.lastChild);
            }
            
            // 创建表单区域
            const formDiv = document.createElement('div');
            formDiv.className = 'trend-form';
            formDiv.style.marginTop = '20px';
            formDiv.style.padding = '20px';
            formDiv.style.backgroundColor = '#f9f9f9';
            formDiv.style.borderRadius = '8px';
            
            // 创建图表区域
            const chartDiv = document.createElement('div');
            chartDiv.className = 'trend-chart';
            chartDiv.style.marginTop = '20px';
            chartDiv.style.height = '400px';
            
            // 根据类型添加不同内容
            switch(type) {
                case 'cardiovascular':
                    formDiv.innerHTML = '<h3>心血管系统数据</h3><p>心率: 72 bpm</p><p>血压: 120/80 mmHg</p>';
                    break;
                case 'respiratory':
                    formDiv.innerHTML = '<h3>呼吸系统数据</h3><p>呼吸频率: 16/min</p><p>血氧饱和度: 98%</p>';
                    break;
                // 其他系统类似...
                default:
                    formDiv.innerHTML = '<h3>' + type + '系统数据</h3><p>示例数据1</p><p>示例数据2</p>';
            }
            
            // 添加示例图表
            const canvas = document.createElement('canvas');
            chartDiv.appendChild(canvas);
            
            // 添加到内容区域
            contentDiv.appendChild(formDiv);
            contentDiv.appendChild(chartDiv);
            
            // 初始化图表
            initChart(canvas, type);
        }
        
        function initChart(canvas, type) {
            const ctx = canvas.getContext('2d');
            
            // 示例数据
            const labels = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
            let data = [];
            let label = '';
            
            // 根据不同类型设置不同数据
            switch(type) {
                case 'cardiovascular':
                    data = [72, 75, 70, 68, 73, 76, 74];
                    label = '心率 (bpm)';
                    break;
                case 'respiratory':
                    data = [16, 15, 17, 16, 15, 18, 16];
                    label = '呼吸频率 (/min)';
                    break;
                case 'digestive':
                    data = [36.5, 36.6, 36.7, 36.5, 36.4, 36.6, 36.5];
                    label = '体温 (°C)';
                    break;
                default:
                    data = [1, 2, 3, 4, 5, 6, 7];
                    label = '示例数据';
            }
            
            new Chart(ctx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [{
                        label: label,
                        data: data,
                        borderColor: '#2196F3',
                        tension: 0.1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: false
                        }
                    }
                }
            });
        }

        // 更新时间
        function updateTime() {
            const now = new Date();
            document.getElementById('current-time').textContent = 
                now.getFullYear() + '-' + 
                (now.getMonth() + 1).toString().padStart(2, '0') + '-' + 
                now.getDate().toString().padStart(2, '0') + ' ' + 
                now.getHours().toString().padStart(2, '0') + ':' + 
                now.getMinutes().toString().padStart(2, '0');
        }
        setInterval(updateTime, 1000);
        updateTime();
    </script>
</body>
</html>